<template>
	<el-card>
		<h2>{{ title }}</h2>
		<div id="staff_entry_departure" style="width: 100%; height: 40vh"></div>
	</el-card>
</template>

<style scoped></style>

<script setup lang="ts" name="trendStaffEntryDepartureIndex">
import * as echarts from 'echarts'
import { ref } from 'vue'

const title = ref('员工入职离职人数')
const option = {
	title: {
		left: '32px',
		text: '',
		subtext: '单位（人）',
		subtextStyle: {
			height: 20
		}
	},
	tooltip: {
		trigger: 'axis',
		axisPointer: {
			type: 'shadow'
		}
	},
	legend: {},
	grid: {
		left: '3%',
		right: '4%',
		bottom: '3%',
		containLabel: true
	},
	xAxis: {
		type: 'category',
		data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
	},
	yAxis: {
		type: 'value',
		boundaryGap: [0, 0.01]
	},

	series: [
		{
			name: '入职',
			type: 'bar',
			barWidth: '25%',
			color: 'rgba(40, 208, 148, 1)',
			data: [11, 58, 43, 28, 11, 43, 53, 28, 11, 21, 27, 54],
			itemStyle: {
				borderRadius: [4, 4, 0, 0]
			},
			label: {
				show: true,
				position: 'top',
				textStyle: {
					color: '#00000066'
				}
			}
		},
		{
			name: '离职',
			type: 'bar',
			barWidth: '25%',
			color: 'rgba(250, 116, 107, 1)',
			data: [3, 11, 22, 26, 5, 18, 5, 2, 5, 18, 19, 5],
			itemStyle: {
				borderRadius: [4, 4, 0, 0]
			},
			label: {
				show: true,
				position: 'top',
				textStyle: {
					color: '#00000066'
				}
			}
		}
	]
}

setTimeout(function () {
	const chart = echarts.init(document.getElementById('staff_entry_departure'))
	chart.setOption(option)
}, 500)
</script>
